<template>
  <div class="qc-query-form-wrapper">
    <a-card :bordered="false">
      <a-form
        v-if="queryColumn.length > 0"
        labelAlign="right"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="queryParam"
        @submit.prevent
      >
        <a-row :gutter="16">
          <a-col
            :xs="24"
            :xl="colSpan"
            v-for="(item, index) in queryColumn"
            :key="index"
            v-show="index < colNumber - 1 || isOpen"
          >
            <!-- 实现让用户可以自定义搜索条件 -->
            <a-form-item :label="item.label">
              <qc-query-form-item
                :query-param="queryParam"
                :query-form-item="item"
                @searchForm="handleSearch"
              ></qc-query-form-item>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :xl="rowOnlyOperateBtn ? 24 : colSpan">
            <div :style="rowOnlyOperateBtn ? 'float:right' : ''" class="qc-query-form-operation-buttons">
              <a-button type="primary" @click="handleSearch">
                <template #icon><SearchOutlined /></template>
                {{ t('component.query-form.search') }}
              </a-button>
              <a-button class="margin-left8" @click="restForm">
                <template #icon><ReloadOutlined /></template>
                {{ t('component.query-form.reload') }}
              </a-button>
              <a class="margin-left8" v-if="queryColumn.length > colNumber - 1" @click="isOpen = !isOpen">
                {{ isOpen ? t('component.query-form.fold') : t('component.query-form.unfold') }}
                <UpOutlined v-if="isOpen" />
                <DownOutlined v-else />
              </a>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent, getCurrentInstance, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { DownOutlined, UpOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import QcQueryFormItem from './query-form-item'
import { QueryFormProps, QueryFormItem } from './interface'
import { getSlotsCustomRenderMap } from './util'
import { getLocale } from '/@/kit/i18n-kit'
import { i18nCNKey } from '/@/framework/profile'
export default defineComponent({
  name: 'QueryForm',
  props: QueryFormProps,
  components: {
    DownOutlined,
    UpOutlined,
    SearchOutlined,
    ReloadOutlined,
    QcQueryFormItem,
  },
  setup(props, { emit }) {
    const { t } = useI18n()
    const ctx = getCurrentInstance()
    const slots = ctx?.slots
    const queryFormProps = reactive({ ...props })
    //加入一个优化项 如果不为中文列label 与内容占比给位1:1即12,12
    if (getLocale() != i18nCNKey) {
      queryFormProps.labelCol = { span: 12 }
      queryFormProps.wrapperCol = { span: 12 }
    }
    //处理插槽
    if (slots) {
      const customRenderMap = getSlotsCustomRenderMap(queryFormProps.queryColumn)
      if (customRenderMap) {
        customRenderMap.forEach((value, key) => {
          let column: any = queryFormProps.queryColumn[key]
          if (slots[value]) {
            const nodeTemplate: Function = slots[value]
            column.customRender = (queryFormItem: QueryFormItem) => nodeTemplate(queryFormItem)
          }
        })
      }
    }

    const isOpen = ref(false)
    //配置一行几列
    const colNumber = computed(() => {
      return 24 / queryFormProps.colSpan
    })
    //配置行数
    const rowsNumber = computed(() => {
      return Math.ceil(queryFormProps.queryColumn.length / colNumber.value)
    })

    //计算是否只有一行
    const rowOnlyOperateBtn = computed(() => {
      return queryFormProps.queryColumn.length % colNumber.value == 0 && isOpen.value
    })
    ///////////////////////////对外api//////////////////////////////////
    const handleSearch = () => emit('search')
    //重置搜索表单
    const restForm = () => {
      let arr = ['page', 'limit', 'join', 'orders']
      for (let i in queryFormProps.queryParam) {
        if (arr.indexOf(i) == -1) queryFormProps.queryParam[i] = null
      }
      handleSearch()
    }
    return {
      t,
      ...queryFormProps,
      isOpen,
      colNumber,
      rowsNumber,
      rowOnlyOperateBtn,
      handleSearch,
      restForm,
    }
  },
})
</script>
<style lang='less' scoped>
.qc-query-form-wrapper ::v-deep(.ant-card-body) {
  padding: 16px 12px 0px 12px;
}

.qc-query-form-wrapper ::v-deep(.ant-form-item) {
  margin: 0px 0px 7px;
}

.margin-left8 {
  margin-left: 8px;
}
.qc-query-form-operation-buttons {
  box-sizing: border-box;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  margin-bottom: 24px;
  vertical-align: top;
}

::v-deep(.ant-calendar-picker) {
  width: 100%;
}
</style>